<!-- 文字配置 -->
<template>
    <div>
        <el-collapse accordion>
            <el-collapse-item title="输入框样式">
                <el-form-item label="提示文字">
                    <avue-input
                        type="text"
                        v-model="main.activeOption.input.placeholder"
                        :disabled="disabled"
                    ></avue-input>
                </el-form-item>
                <el-form-item label="缩进">
                    <avue-input-number
                        v-model="main.activeOption.input.indent"
                        :disabled="disabled"
                        :min="0"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="输入框背景">
                    <avue-input-color
                        v-model="main.activeOption.input.backgroundColor"
                        :disabled="disabled"
                    ></avue-input-color>
                </el-form-item>
                <el-collapse accordion>
                    <el-collapse-item title="文本样式">
                        <el-form-item label="字体颜色">
                            <avue-input-color
                                v-model="main.activeOption.input.text.color"
                                :disabled="disabled"
                            ></avue-input-color>
                        </el-form-item>
                        <el-form-item label="字体类型">
                            <avue-select
                                filterable
                                allow-create
                                v-model="
                                    main.activeOption.input.text.fontFamily
                                "
                                :dic="dicOption.fontFamily"
                                :disabled="disabled"
                            ></avue-select>
                        </el-form-item>
                        <el-form-item label="字体大小">
                            <avue-input-number
                                v-model="main.activeOption.input.text.fontSize"
                                :max="200"
                                :disabled="disabled"
                            ></avue-input-number>
                        </el-form-item>
                        <el-form-item label="文字粗细">
                            <avue-select
                                v-model="
                                    main.activeOption.input.text.fontWeight
                                "
                                :dic="dicOption.fontWeight"
                                :disabled="disabled"
                            >
                            </avue-select>
                        </el-form-item>
                    </el-collapse-item>
                    <el-collapse-item title="边框样式">
                        <el-form-item label="边框颜色">
                            <avue-input-color
                                v-model="main.activeOption.input.border.color"
                                :disabled="disabled"
                            ></avue-input-color>
                        </el-form-item>
                        <el-form-item label="边框宽度">
                            <avue-input-number
                                v-model="main.activeOption.input.border.width"
                                :disabled="disabled"
                                :max="200"
                            ></avue-input-number>
                        </el-form-item>
                        <el-form-item label="边框圆角">
                            <avue-input-number
                                v-model="main.activeOption.input.border.radius"
                                :disabled="disabled"
                                :max="200"
                            ></avue-input-number>
                        </el-form-item>
                        <el-form-item label="边框类型">
                            <avue-select
                                filterable
                                allow-create
                                v-model="main.activeOption.input.border.type"
                                :disabled="disabled"
                                :dic="dicOption.borderType"
                            ></avue-select>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-collapse-item>
            <el-collapse-item title="按键样式">
                <el-form-item label="按钮文本内容">
                    <avue-input
                        type="text"
                        v-model="main.activeOption.button.text"
                        :disabled="disabled"
                    ></avue-input>
                </el-form-item>
                <el-form-item label="按钮宽度">
                    <avue-input-number
                        v-model="main.activeOption.button.width"
                        :disabled="disabled"
                        :max="200"
                    ></avue-input-number>
                </el-form-item>
                <el-collapse accordion>
                    <el-collapse-item title="普通样式">
                        <el-form-item label="背景颜色">
                            <avue-input-color
                                v-model="
                                    main.activeOption.button.normal
                                        .backgroundColor
                                "
                                :disabled="disabled"
                            ></avue-input-color>
                        </el-form-item>
                        <el-collapse accordion>
                            <el-collapse-item title="边框样式">
                                <el-form-item label="边框颜色">
                                    <avue-input-color
                                        v-model="
                                            main.activeOption.button.normal
                                                .border.color
                                        "
                                        :disabled="disabled"
                                    ></avue-input-color>
                                </el-form-item>
                                <el-form-item label="边框宽度">
                                    <avue-input-number
                                        v-model="
                                            main.activeOption.button.normal
                                                .border.width
                                        "
                                        :max="200"
                                        :disabled="disabled"
                                    ></avue-input-number>
                                </el-form-item>
                                <el-form-item label="边框圆角">
                                    <avue-input-number
                                        v-model="
                                            main.activeOption.button.normal
                                                .border.radius
                                        "
                                        :max="200"
                                        :disabled="disabled"
                                    ></avue-input-number>
                                </el-form-item>
                                <el-form-item label="边框类型">
                                    <avue-select
                                        filterable
                                        allow-create
                                        v-model="
                                            main.activeOption.button.normal
                                                .border.type
                                        "
                                        :dic="dicOption.borderType"
                                        :disabled="disabled"
                                    ></avue-select>
                                </el-form-item>
                            </el-collapse-item>
                            <el-collapse-item title="文本样式">
                                <el-form-item label="字体颜色">
                                    <avue-input-color
                                        v-model="
                                            main.activeOption.button.normal.text
                                                .color
                                        "
                                        :disabled="disabled"
                                    ></avue-input-color>
                                </el-form-item>
                                <el-form-item label="字体类型">
                                    <avue-select
                                        filterable
                                        allow-create
                                        v-model="
                                            main.activeOption.button.normal.text
                                                .fontFamily
                                        "
                                        :dic="dicOption.fontFamily"
                                        :disabled="disabled"
                                    ></avue-select>
                                </el-form-item>
                                <el-form-item label="字体大小">
                                    <avue-input-number
                                        v-model="
                                            main.activeOption.button.normal.text
                                                .fontSize
                                        "
                                        :max="200"
                                        :disabled="disabled"
                                    ></avue-input-number>
                                </el-form-item>
                                <el-form-item label="文字粗细">
                                    <avue-select
                                        v-model="
                                            main.activeOption.button.normal.text
                                                .fontWeight
                                        "
                                        :dic="dicOption.fontWeight"
                                        :disabled="disabled"
                                    >
                                    </avue-select>
                                </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                    </el-collapse-item>
                </el-collapse>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import { dicOption } from "@/option/config";
export default {
    name: "input",
    data() {
        return {
            dicOption: dicOption,
            disabled: this.contain.activeObj.isLock
        };
    },
    inject: ["main", "contain"]
};
</script>

<style></style>
